<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    now.getTime(),
                    Math.round(value)
                ]
            }
        }

var data = [];
var now = +new Date();
var oneDay = 1 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
   data.push(randomData());
}
//data.push(1555000026833, 1235);

option = {
    title: {
        text: '动态数据 + 时间坐标轴',
        left: "30%", //标题位置
        top: "30",
    },
    // 提示框
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getHours() + ':' + (date.getMinutes() + 1) + ':' + date.getSeconds() + '   ' + params.value[1];
        },
        axisPointer: {
            animation: false,
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        },
        axisTick: {
            length: 5  // 刻度轴长度
        },
        axisLabel:{
            formatter: function (value, index) {
                // 格式化成月/日，只在第一个刻度显示年份
                var date = new Date(value);
                
                var texts = [date.getHours(), date.getMinutes(), date.getSeconds()];
                if (texts[0] <10 ){
                    texts[0] = "0" + date.getHours()
                }
                if (texts[1] <10 ){
                    texts[1] = "0" + date.getMinutes()
                }
                if (texts[2] <10 ){
                    texts[2] = "0" + date.getSeconds()
                }
                
                return texts.join(':');
            }
        }
    },
    yAxis: {
        name: "KB/s",
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        },
        max:4000, //固定坐标轴最大刻度
        axisLabel:{
            margin: 2, //刻度与标签的间距
            formatter: function (value,  index) {
                if (value >= 1000 ){
                    value = value/1000 + "K"
                }
                return value;
            }
        }
    },
    series: [{
        name: '',
        type: 'line',
        showSymbol: false,
        hoverAnimation: true,
        data: data
    }]
};


//模拟推送的数据
setInterval(function () {
    data.shift();
        data.push(randomData());
    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
</body>
</html>